<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<script text="text/javascript">
			function datetimeFormat(longTypeDate){
			    var dateTypeDate = "";
			    var date = new Date();
			    date.setTime(longTypeDate);
			    dateTypeDate += date.getFullYear(); //年
			    dateTypeDate += "-" + date.getMonth(); //月
			    dateTypeDate += "-" + date.getDay(); //日
			    dateTypeDate += " " + date.getHours(); //时
			    dateTypeDate += ":" + date.getMinutes();  //分
			    dateTypeDate += ":" + date.getSeconds();  //分
			    return dateTypeDate;
			}
			// function imgerrorfun(){
			//         var img=event.srcElement; 
			//         img.src="img/log.png"; //默认图片
			//         img.onerror=null; 
			//     } 
		</script>
		<style>
			ul{
				list-style-type: none;
			}
			
			body{
				overflow: hidden;
				
			}
			
			#mainlist{
				overflow-y: scroll;
				overflow-x: hidden;
				height: calc(100vh - 250px);
			}
			
			.nora{
				text-decoration: none;
				color: black;
			}
			
			
			
			.p1{
				font-size: 45px;
				-webkit-text-size-adjust: none;
			}
			
			.p2{
				font-size: 35px;
				-webkit-text-size-adjust: none;
			}
			
			.p3{
				font-size: 41px;
				-webkit-text-size-adjust: none;
			}
			
			
			
			.bigimgdiv{
				
				width: 100%;
				height: 1000px;
				
				margin-top: 1%;
				position: absolute;
				
				text-align: center;
			}
			
			
			.imgli{
				display: inline;
			}
			
			
			
			#rightTab{
				margin-top: 2%;
				float: right;
				margin-right: 26%;
			}
			
			#leftTab{
				margin-left: 3%;
				margin-top: 2%;
				float: left;
			}
			
			#topdiv{
				margin-top: 2%;
				height: 120px;

			}
			
			
			
			
			
			#userinfo{
				height: 200px;

			}
			#userinfopic{
				float: left;
			}
			#userinfoname{
				width: 70%;
				float: right;
				margin-right: 10%;
			}
			

			
			#bigimgtip{
				margin-left: 30%;
				margin-top: 5%;
			}
			#contentstyle{
				word-break: break-all;
				
			}
			
			#dialogcontent{
				text-align: center;
				margin-bottom: 10%;
			}
			
			
		</style>
	</head>
	<body>
		
		<div id="anythinglist" >
			<el-dialog :visible.sync="dialogVisible" width="80%" :show-close="false" @open="getscrolltop">
				<div id="dialogcontent">
					<span class="p1">{{ tipstr }}</span>
				</div>
				<div style="text-align: center; ">
					<span slot="footer" class="dialog-footer">
						<el-button class="p1" type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</div>
			</el-dialog>
			
		<!-- 	<p class="p1" id="bigimgtip" v-if="!myactivate">点击图片返回</p>
			
			<div class="bigimgdiv" v-if="!myactivate">
				<img :src="bigimgsrc" width="100%" v-on:click="lostbigimg"  onerror="imgerrorfun()"/>
			</div> -->
			
			
			<div id="topdiv">
				<div id="leftTab">
					<a href="index.html" class="p1 nora el-icon-back" ></a>
				</div>
				<div id="rightTab">
					<u class="p1" ><b>全部学校</b></u>
					<small class="p1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
					<small class="p1" v-on:click="tipmyschool" >本学校</small>
				</div>
			</div>
			
			<ul id="mainlist" class="p1 infinite-list" v-infinite-scroll="getnextdata">
				<li v-for="(item,index) in anys">
					<div id="userinfo" v-on:click="tipuserinfo()">
						<div id="userinfopic">
							<el-avatar v-bind:src="item.userpicurl" :size="150" :fit="fill" @error="errorhandler">
								<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
							</el-avatar>
							<!-- <img v-bind:src="item.userpicurl" width="150px" height="150px"  onerror="imgerrorfun()"/> -->
						</div>
								
						<div id="userinfoname">
							<p id="username"><b>{{ item.name }}</b></p>
						</div>
					</div>
						
					<p id="contentstyle" class="p3" v-on:click="tipcommentinfo()">{{ item.content }}</p>
						
					<ul id="imglist">
						<li class="imgli" v-for="img in item.imgs">
							<!-- <img v-bind:src="img" width="290px" height="290px" v-on:click="getbigimg(img)" onerror="imgerrorfun()"/> -->
							<el-image :src="img" style="width: 290px; height: 290px" fit="cover" :preview-src-list="item.imgs">
								<div slot="error" class="image-slot">
								    <i class="el-icon-picture-outline"></i>
								</div>
								<div slot="placeholder" class="image-slot">
								        加载中<span class="dot">...</span>
								</div>
							</el-image>
						</li>
					</ul>
						
						
					<div v-on:click="tipcommentinfo()">
						<p class="p2">
							点赞:&nbsp{{ item.islikecount }}
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							评论:&nbsp{{ item.commentcount }}
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							发布时间:&nbsp{{ item.time }}
						</p>
					</div>
				</li>
			</ul>
		</div>
		
		
		<script type="text/javascript">		
			var anythinglist = new Vue({
				el : '#anythinglist',
				data :{
					anys : [],
					
					// myactivate : true,
					dialogVisible: false,
					tipstr : "",
					bigimgsrc : "img/log.png",
					tempscrolltop : 0
				},
			
			methods : {
				errorhandler : function(){
					return true;
				},
				
				// getbigimg : function(img){
				// 	this.getscrolltop();
				// 	this.myactivate = false;
				// 	this.bigimgsrc = img;
					
				// },
				
				// lostbigimg : function(){
				// 	//this.setscrolltop();
				// 	this.myactivate = true;
					
				// },
				
				tipmyschool : function(){
					this.tipstr = "请使用APP登陆后查看您所在学校的表白墙";
					this.dialogVisible = true;
					// alert("请使用APP登陆后查看您所在学校的表白墙");
				},
				
				tipuserinfo : function(){
					this.tipstr = "请使用APP查看用户信息";
					this.dialogVisible = true;
					// alert("请使用APP查看用户信息");
				},
				
				tipcommentinfo : function(){
					this.tipstr = "请使用APP查看帖子评论";
					this.dialogVisible = true;
					// alert("请使用APP查看帖子评论");
				},
				
				getscrolltop : function(){
					var elem = document.getElementById('mainlist')
					this.tempscrolltop = elem.scrollTop;
				},
				
				getdata : function(datelong){
					var remoteanythinglist = new Array();
					axios.get('http://110.42.159.214:8080/anything/query/1/date/'+ datelong +'/000000@qq.com/0')
					        .then(function (response) {
								remoteanythinglist = response.data.result
								
								//var anythingsdata = new Array();
								var j = 0;
								for(j = 0; j < remoteanythinglist.length; j++){
									var remoteimgs = new Array();
									var i = 0;
									for(i = 0; i < remoteanythinglist[j].imagecount; i++){
										remoteimgs.push("https://anything-1302777070.file.myqcloud.com/anythings/"+remoteanythinglist[j].publisher.account + "/" + remoteanythinglist[j].date + "/" + i + ".jpg");
									}
									var anything = {
										name : remoteanythinglist[j].publisher.name,
										userpicurl : "https://anything-1302777070.file.myqcloud.com/users/" + remoteanythinglist[j].publisher.account + ".jpg",
										content : remoteanythinglist[j].content,
										islikecount : Math.abs(remoteanythinglist[j].likeCount),
										commentcount : remoteanythinglist[j].commentCount,
										time : datetimeFormat(remoteanythinglist[j].date),
										date : remoteanythinglist[j].date,
										imgs : remoteimgs
									};
									anythinglist.anys.push(anything);
								}
								
								//anythinglist.anys = anythingsdata;
					        })
					        .catch(function (error) {
								alert(error)
					        })
				},
				
				getnextdata : function(){
					if(anythinglist.anys.length > 0){
						this.getscrolltop();
						lastelem = anythinglist.anys[anythinglist.anys.length - 1];
						this.getdata(lastelem.date);
					}
					
				}
			},
			
			updated () { 
				this.$nextTick(() => {
					var elem = document.getElementById('mainlist');
					elem.scrollTop = this.tempscrolltop;
				}) 
			}
		})
		
		var myDate = new Date();
		var datelong = myDate.getTime();
		anythinglist.getdata(datelong);
			
		</script>
	</body>
</html>